<template>
    <section class="f14">
        <header class="top-common">
            <div class="w1200">
                <nuxt-link to="/customer">客服中心</nuxt-link> | <nuxt-link to="/appdownload">手机客户端</nuxt-link>
            </div>
        </header>
        <nav class="nav-common">
            <ul>
                <li v-for="(item,index) in navs" :key="index">
                    <nuxt-link :to="item.link" :class="$route.name===item.name?'active':''">{{item.title}}</nuxt-link>
                </li>
                <div class="login-wrap" v-show="!$store.state.isLogin">
                    <nuxt-link to="/login">登录</nuxt-link>
                    <nuxt-link to="/register">注册</nuxt-link>
                </div>
                <div class="login-wrap" v-show="$store.state.isLogin">
                    <span>{{$store.state.user}}</span>
                    <span class="logout" @click="logout">退出</span>
                </div>
            </ul>
        </nav>
        
    </section>
</template>
<script>
export default {
    name:'top',
    data(){
        return{
            navs:[
                {link:'/',title:'首页',name:'index'},
                {link:'/detail',title:'详情',name:'detail'},
                {link:'/game',title:'游戏',name:'game'}
            ]
        }
    },
    methods:{
        logout(){
            this.$store.dispatch('logout').then(()=>{
                this.$router.push('/')
            })
        }
    }

}
</script>
<style scoped>
.logout{
    cursor: pointer;
}
.top-common{
    height: .555556rem;
    line-height: .555556rem;
}
.top-common,.nav-common{
    width:100%;
}

.f14{font-size: 14px;}
.nav-common{
    height: .833333rem;
    line-height: .833333rem;
    background-color: #fea901;
}
.nav-common ul{
    display: flex;
    width:22.222222rem;
    margin:auto;
}
.login-wrap{
    flex:1;
    text-align:right;
}
.login-wrap a{
    display:inline-block;
}
.nav-common ul li a,.login-wrap a{
    padding:0 .37037rem;
}
.nav-common ul li a{
    display: block;
}
.nav-common ul li a:hover,.nav-common ul li a.active,.login-wrap a.nuxt-link-exact-active{
    background:#282828;
    color:#fff;
}
</style>


